<template>
    <el-container>
        <el-main class="main-select-body">
            <el-row justify="space-between" type="flex" class="main-select-row">
                 <el-col :span="6" class="main-select-col"><div><span class="label-style">{{$t('formData.maneuverName')}}</span> <el-input type="text" style="width:70%" v-model="formData.maneuverName" ></el-input></div></el-col>
            <el-col :span="6">&nbsp;</el-col>
            <el-col :span="6">&nbsp;</el-col>
                <el-col :span="6" style="text-align:right;">
                    <el-button type="primary" class="main-select-btn" @click="submitForm">查询</el-button>
                    <el-button class="main-reset-btn" @click="retForm">重置</el-button>
                    <el-button icon="el-icon-delete" :disabled="selectIds.length < 1" @click="delBtnClick">
                    </el-button>
                    <el-button icon="el-icon-plus" @click="addBtnClick">
                    </el-button>
                </el-col>
            </el-row>
            <el-table
                
                class="marT20"
                :data="tableData"
                :height="tableHeight"
                v-loading="loading"
                @row-dblclick="handleEdit"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 0.8)"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="70" align="center"></el-table-column>
                <el-table-column prop="maneuverName" :label="$t('tManeuverInfo.maneuverName')"  min-width="120">
                    <template slot-scope="scope">
                        <div :title="scope.row.maneuverName" class="cell-hidden">{{ scope.row.maneuverName }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="orgId" :label="$t('tManeuverInfo.orgId')"  min-width="120">
                    <template slot-scope="scope">
                        <div :title="scope.row.orgId" class="cell-hidden">{{ scope.row.orgId }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="principalId" :label="$t('tManeuverInfo.principalId')"  min-width="120">
                    <template slot-scope="scope">
                        <div :title="scope.row.principalId" class="cell-hidden">{{ scope.row.principalId }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="maneuverStatus" :label="$t('tManeuverInfo.maneuverStatus')"  min-width="120">
                    <template slot-scope="scope">
                        <div :title="scope.row.maneuverStatus" class="cell-hidden">{{ scope.row.maneuverStatus }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" :label="$t('tManeuverInfo.createTime')" min-width="120">
                    <template slot-scope="scope">
                        <div :title="dateTimeFormatter(scope.row.createTime)"  class="cell-hidden">{{ dateTimeFormatter(scope.row.createTime) }}</div>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('base.table.action')">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-edit"
                                @click="handleEdit(scope.row)"
                        ></el-button>
                        <el-button
                                icon="el-icon-delete"
                                @click="delBtnClick(scope.row)"
                        ></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </el-main>
        <v-dialog :dialogVisible="dialogVisible" :tManeuverInfo="tManeuverInfo" @dialogClose="dialogClose" @dialogSave="dialogSave"></v-dialog>
    </el-container>
</template>
<script>
    import vDialog from './Dialog';
    export default {
        data() {
            return {
                tableHeight: window.innerHeight - 250,
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                total: 5,
                loading: false,
                dialogVisible: false,
                selectIds: [],
                formData: {
                    maneuverName : "",
                    keyWord: ""
                },
                tManeuverInfo: {
                    id : '',
                    maneuverName : '',
                    orgId : '',
                    principalId : '',
                    assistantId : '',
                    maneuverStatus : '',
                    planManeuverTime : '',
                    maneuverReleaseStatus : '',
                    creatorId : '',
                    createTime : '',
                    updateTime : '',
                    isDeleted : '',
                    secretCode : '',
                    tenantId : '',
                    reviserId : '',
                }
            };
        },
        components: {
            vDialog: vDialog
        },
        methods: {
            submitForm() {
                this.requestGridData();
            },
            dialogClose() {
                this.dialogVisible = false;
                this.retCancel();
                this.requestGridData();
            },
            dialogSave() {
                this.dialogVisible = false;
                this.retCancel();
                this.requestGridData();
            },
            retForm(){
                this.formData = {
                    maneuverName : "",
                    keyWord: ""
                };
                this.submitForm();
            },
            retCancel() {
                this.tManeuverInfo = {
                    id : '',
                    maneuverName : '',
                    orgId : '',
                    principalId : '',
                    assistantId : '',
                    maneuverStatus : '',
                    planManeuverTime : '',
                    maneuverReleaseStatus : '',
                    creatorId : '',
                    createTime : '',
                    updateTime : '',
                    isDeleted : '',
                    secretCode : '',
                    tenantId : '',
                    reviserId : '',
                };
            },
            //新增按钮点击事件
            addBtnClick() {
                this.dialogVisible = true;
            },
            //编辑按钮点击事件
            handleEdit(row) {
                var _this = this;
                _this.dialogVisible = true;
                _this.tManeuverInfo = {...row};
            },
            // 列表多选事件
            handleSelectionChange(val) {
                let _this = this;
                _this.selectIds = [];
                val.forEach(arr => {
                    _this.selectIds.push(arr.id);
                });
            },
            // 删除操作
            delBtnClick(row) {
                let _this = this;
                if (row.id != null && row.id != "" && row.id != undefined) {
                    _this.selectIds = [row.id];
                }
                let message = _this.$message;
                let i18n = _this.$i18n;
                if (_this.selectIds.length == 0) {
                    return message({
                        message: i18n.t('base.error.no_select'),
                        type: 'warning'
                    });
                }
                //提示框
                this.$confirm(i18n.t('comm.del'), i18n.t('base.tooltip'), {
                    confirmButtonText: i18n.t('base.button.ok'),
                    cancelButtonText: i18n.t('base.button.cancel'),
                    type: 'warning'
                }).then(() => {
                    let ids = _this.selectIds.join(',');
                    _this.axios['maneuver-scenario']
                        .post(this.HOST + '/delete', {
                            id: ids
                        })
                        .then(function(res) {
                            if (res.status == '1') {
                                message.success(i18n.t('base.operation.success'));
                            } else {
                                message.error(i18n.t('base.operation.error'));
                            }
                            _this.selectIds = [];
                            _this.requestGridData();
                        });
                })
                .catch(() => {
                    _this.selectIds = selectIds;
                });
            },
            //请求数据
            requestGridData() {
                var _this = this;
                _this.selectIds = [];
                let message = _this.$message;
                _this.loading = true;
                _this.axios['maneuver-scenario']
                    .get(this.HOST + '/list', {
                        page: _this.currentPage,
                        rows: _this.pageSize
                    })
                    .then(function(res) {
                        _this.loading = false;
                        if (res.status == '1') {
                            _this.tableData = res.data.rows;
                            _this.total = res.data.total;
                        } else {
                            message.error(res.stackmessage);
                        }
                    })
                    .catch(function(err) {
                         message.error(err);
                    });
            },
            customIndex(index) {
                return index + 1 + (this.currentPage - 1) * this.pageSize;
            },
            //每页显示数据个数变化时调用
            handleSizeChange(val) {
                this.pageSize = val;
                this.requestGridData();
            },
            //页码变化时调用
            handleCurrentChange(val) {
                this.currentPage = val;
                this.requestGridData();
            },
            dateTimeFormatter(cellValue) {
                if (cellValue != null) {
                    return this.dateFormatter(cellValue);
                }
                return "";
            },
            //时间处理
            dateFormatter(value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                let d = date.getDate();
                d = d < 10 ? '0' + d : d;
                let h = date.getHours();
                h = h < 10 ? '0' + h : h;
                let minute = date.getMinutes();
                minute = minute < 10 ? '0' + minute : minute;
                let second = date.getSeconds();
                second = second < 10 ? '0' + second : second;
                return y + '/' + m + '/' + d + ' ' + h + ':' + minute + ':' + second;
            },
        },
        mounted() {
            let _this = this;
            this.requestGridData();
        }
    };
</script>
<style scoped lang="less">
    .el-input {
        width: 180px;
    }
    /deep/.el-input__icon{
        height: auto;
    }
    /deep/.el-date-editor .el-range-separator{
        height: auto;
    }
    /deep/.el-table .cell{
        word-break: inherit;
    }
</style>
